<template>
  <div class="fuqin">
    <el-container class="home-container">
      <!-- 头部区域 -->
      <el-header>
        <div style="height: 100%" class="elh">
          <img src="../assets/Logo.png" alt="" style="height: 90%" />
          <span @click="BackHomeFn" style="cursor: pointer">后台管理系统</span>
        </div>
        <el-button type="info" style="position: relative" @click="BackLoginFn"
          >退出</el-button
        >
      </el-header>
      <!-- 页面主体区域 -->
      <el-container>
        <!-- 侧边栏 -->
        <el-aside :width="isCollapse ? '64px' : '200px'">
          <div
            class="toggle-button"
            @click="toggleCollapse"
            style="position: relative"
          >
            |||
          </div>
          <!-- 菜单区域 -->
          <el-menu
            background-color="#0000"
            text-color="#fff"
            active-text-color="#409EFF"
            :collapse-transition="false"
            :collapse="isCollapse"
            unique-opened
          >
            <!-- 一级菜单 -->
            <el-submenu index="1">
              <template slot="title">
                <i class="el-icon-user"></i
                ><span v-if="!isCollapse">用户管理</span>
              </template>
              <!-- 二级菜单 -->
              <el-menu-item-group>
                <el-menu-item index="1-1" @click="Jump1()"
                  ><i class="el-icon-menu"></i>用户列表</el-menu-item
                >
              </el-menu-item-group>
            </el-submenu>
            <el-submenu index="2">
              <template slot="title"
                ><i class="el-icon-unlock"></i
                ><span v-if="!isCollapse">权限管理</span>
              </template>
              <el-menu-item-group>
                <el-menu-item index="2-1" @click="Jump2()"
                  ><i class="el-icon-menu"></i>权限列表</el-menu-item
                >
                <el-menu-item index="2-2" @click="Jump3()"
                  ><i class="el-icon-menu"></i>角色列表</el-menu-item
                >
              </el-menu-item-group>
            </el-submenu>
            <el-submenu index="3">
              <template slot="title"
                ><i class="el-icon-s-goods"></i
                ><span v-if="!isCollapse">商品管理</span></template
              >
              <el-menu-item-group>
                <el-menu-item index="3-1" @click="Jump4()"
                  ><i class="el-icon-menu"></i>商品列表</el-menu-item
                >
                <el-menu-item index="3-2" @click="Jump5()"
                  ><i class="el-icon-menu"></i>商品分类</el-menu-item
                >
              </el-menu-item-group>
            </el-submenu>
            <el-submenu index="4">
              <template slot="title"
                ><i class="el-icon-s-order"></i
                ><span v-if="!isCollapse">订单管理</span></template
              >
              <el-menu-item-group>
                <el-menu-item index="4-1" @click="Jump6()">
                  <i class="el-icon-menu"></i>订单列表</el-menu-item
                >
              </el-menu-item-group>
            </el-submenu>
            <el-submenu index="5">
              <template slot="title"
                ><i class="el-icon-data-line"></i
                ><span v-if="!isCollapse">数据统计</span></template
              >
              <el-menu-item-group>
                <el-menu-item index="5-1" @click="Jump7()">
                  <i class="el-icon-menu"></i>数据报表</el-menu-item
                >
              </el-menu-item-group>
            </el-submenu>
          </el-menu>
        </el-aside>

        <el-main>
          <router-view> </router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 折叠菜单
      isCollapse: false,
    };
  },
  methods: {
    Jump1() {
      this.$router.push({
        path: "/home/users",
      });
    },
    Jump2() {
      this.$router.push({
        path: "/home/rights",
      });
    },
    Jump3() {
      this.$router.push({
        path: "/home/roles",
      });
    },
    Jump4() {
      this.$router.push({
        path: "/home/list",
      });
    },
    Jump5() {
      this.$router.push({
        path: "/home/cate",
      });
    },
    Jump6() {
      this.$router.push({
        path: "/home/order",
      });
    },
    Jump7() {
      this.$router.push({
        path: "/home/reports",
      });
    },
    toggleCollapse() {
      this.isCollapse = !this.isCollapse;
    },
    BackHomeFn() {
      this.$router.push({
        path: "/home",
      });
    },
    BackLoginFn() {
      this.$router.push({
        path: "/login",
      });
    },
  },
};
</script>

<style>
* {
  margin: 0;
  padding: 0;
}
</style>
<style scoped>
.fuqin {
  overflow: hidden;
}
.home-container {
  height: 100%;
  overflow: hidden;
}
.elh img {
  vertical-align: middle;
}
.el-header {
  background-color: rgb(16, 15, 20);
  opacity: 0.8;
  color: #fff;
  line-height: 60px;
  display: flex;
  justify-content: space-between;
  padding-left: 0;
  align-items: center;
  font-size: 20px;
  height: 60px;
}

.el-header div {
  display: flex;
  align-items: center;
}
.el-header div span {
  margin-left: 15px;
}

.el-aside {
  min-height: 91.8vh;
  background-color: #000000;
}
i {
  margin-right: 20px;
}
.el-aside {
  color: #0000;
}

.el-menu {
  border-right: none;
}
.toggle-button {
  background-color: #000;
  font-size: 10px;
  line-height: 24px;
  color: #fff;
  text-align: center;
  letter-spacing: 0.2em;
  cursor: pointer;
}
</style>
